<template>
	<view class="pages">
		<view class="tabbox">
			<view v-for="(item, i) in toplist" :key="i" class="tab" @click="topChange(item.id)">
				<view :class="topSign==item.id ? 'active' : ''">
					{{item.name}}
				</view>
				<view :class="topSign==item.id ? 'underline' : ''"></view>
				<view class="message-badge" v-if="item.point">{{ item.point }}</view>
			</view>
		</view>
		
		<view class="box">
			<view class="listbox"  v-for="(item,index) in list" :key="index">
				<view class="check" v-if="showCheck" @click="tourl('/pages/order/orderinfo?id='+item.id)">
					<check-icon :check="ids.find(id=>item.id==id)" :disable="item.type!=1"
					 @change="(e)=>choseCheck(item.id,item)"></check-icon> 
				</view>
				
				<view class="list" >
					<view class="list1" @click="tourl('/pages/order/orderinfo?id='+item.id)">
						<view style="color: #999;display: flex;align-items: center;">
							{{item.orderCode}} 
							<!-- <text v-if="item.type==1">{{item.merchantOrderId}}</text> -->
							<image v-if="ischangeOrder(item.xorderItems)"
							src="@/static/my/zd.png" mode="widthFix" style="width:80rpx;height: 40rpx;"></image> 
						</view>
						<view>
							<!--   0待付款 1 已发布 2待服务3售后 4 售后中 5售后完成 6已完成 7已取消 -->
							<text style="color: #FF533B;" v-if="item.orderStatus==0">待付款</text>
							<text style="color: #FF533B;" v-if="item.orderStatus==1">已发布</text>
							<view    v-if="item.orderStatus==2">
								<text style="color: green;">{{item.orderSubStatus | statusStr}}</text>
							</view>
							<text style="color: #999;" v-if="item.orderStatus==3">售后</text>
							 <text style="color: #999;" v-if="item.orderStatus==4">售后中</text>
							 <text style="color: #999;" v-if="item.orderStatus==5">售后完成</text>
							<text style="color: #999;" v-if="item.orderStatus==6">已完成</text>
							<text style="color: #999;" v-if="item.orderStatus==7">已取消</text>
						</view>
					</view>
					 
					<view class="list2" @click="tourl('/pages/order/orderinfo?id='+item.id)">
						<view class="img">
							<image :src="imageStatus[item.type]" mode="aspectFill"></image> 
						</view>
						<view class="txt">
							 <view  >
							 	<view class="txt1"> {{item.categoryName}}</view>
								<view class="txt1"> ￥{{item.actualMoney}}</view>
							 </view>
							 <!--  工程单 -->
							 <view>
							 	<view v-if="item.serviceStartTime"> {{item.serviceStartTime}}</view>
							 	<view v-if="item.serviceEndTime"> {{item.serviceNum}}人服务 </view>
							 </view>
							 <view  >
							 	<view v-if="item.type==1"> {{item.timeCycle}}</view>
							 	<view v-if="item.type==1"> 共{{item.serviceSection}}小时 </view>
							 </view>
						</view>
					</view> 
					  
					<view class="list4" v-if="item.orderStatus!=2">
						 
						<!-- //订单状态 0待付款 1 已发布 2待服务3售后 4 售后中 5售后完成 6已完成 7已取消 -->
						<view  @click.stop="cancelOrder(item,1)" v-if="item.orderStatus==0"> 取消订单</view> 
						<view  @click.stop="cancelOrder(item,2)" v-if="item.orderStatus==1 "> 取消订单</view>  
						<view  @click.stop="cancelOrder(item,3)" v-if="item.orderStatus==2 "> 取消订单</view>   
						 
						<view  @click.stop="tourl('/pages/order/editOrder?id='+item.id)" 
						v-if="item.orderStatus==0 || item.orderStatus==1 || item.orderStatus==2"> 修改订单</view>
						
						<view  @click.stop="tourl('/pages/order/payOrder?orderList='+item.type+'&id='+item.id)" 
						v-if="item.orderStatus==0"> 去付款</view>
						
						<view  @click.stop="eralychose(item)" v-if="item.orderStatus==2"> 提前结束</view>
							
						<view  @click.stop="deleteOrder(item)" v-if="item.orderStatus==6 || item.orderStatus==5"> 删除订单</view>
						
						<view v-if="item.orderStatus==6 || item.orderStatus==5" @click.stop="toInvoice(item)" > 
							{{item.invoiceStatus>1 ? '查看发票':'申请发票' }}
						</view>
						<view @click.stop="tourl('/pages/my/appraise/addappraise?id='+item.id)"
							v-if="item.orderStatus==6 && !item.commentStatus"> 评价晒单</view>
						<!--  v-if="item.orderStatus==6" -->	
						<view  @click.stop="tourl('/pages/order/order?oldId='+item.id)"
						 v-if="item.orderStatus==6"> 再来一单</view>
						
						<view  @click.stop="aftersalecancel(item)" 
						v-if="item.orderStatus==4 || item.orderStatus==3"> 取消售后</view>	
						<!-- <view  @click.stop="tourl('/pages/my/invoice/addinvoice?view=1&id='+item.id)"
							v-if="item.orderStatus==5"> 查看发票</view>	 -->
						 
					</view>
					<!-- 待服务 
					0 已出发 1 已到达 2已结束 4 待服务 5 拒单 6 转单申请 7 取消申请 11 修改申请 12已开始-->
					<view class="list4" v-else>
						 
						<view  @click.stop="cancelOrder(item,3)" 
						v-if="item.orderSubStatus==4 || item.orderSubStatus==0 || item.orderSubStatus==1" > 取消订单</view> 
						
						<view style="position: relative;">
							分享 <button  @tap="handleShare(item)" open-type="share" plain=none  
							style="margin: 0;padding: 0;position: absolute;height: 50rpx;top: 0;left: 0;width: 100%;border: none;" >
							</button>
							
						</view>        
						
						 
						 
						<view  @click.stop="tourl('/pages/order/editOrder?id='+item.id)" 
						v-if="item.orderSubStatus==4 || item.orderSubStatus==0 || item.orderSubStatus==1"> 修改订单</view>
						
						<view  @click.stop="eralychose(item)" 
							v-if="item.orderSubStatus==12"> 提前结束</view>
						
						<!-- v-if="item.orderSubStatus==1" -->
						<view  @click.stop="tourl('/pages/order/addTimeOrder?id='+item.id)"
							v-if="(item.orderSubStatus==12) && item.type==1"> 订单加时</view>
							<!-- v-if="item.orderSubStatus==2" -->
						<view  @click.stop="tourl('/pages/order/serviceacceptance?id='+item.id + '&type=' + item.type)" 
							v-if="item.orderSubStatus==2"> 服务验收</view>	
						<!-- <view  @click.stop="tourl('/pages/my/appraise/addappraise?id='+item.id)" 
							v-if="item.orderSubStatus==2"> 订单晒单</view>	 -->
						<view  @click.stop="tourl('/pages/order/order?oldId='+item.id)"
							v-if="item.orderSubStatus==2"> 再来一单</view>	
						 
					</view>
				</view>
				
			</view>
			<view class="nothing" v-if="list.length==0">- 暂无更多数据 -</view> 
		</view>
		
		
		<view style="height: 120rpx;"></view>
		<view class="orderfooter" v-if="(topSign=='0' || topSign=='1' || topSign=='2') && showType1"  >
			<view class="notCheck" v-if="!showCheck">
				<text>当前页面有批量订单可选择批量操作</text>
				<text @click="showCheck=!showCheck" style="color: #277EEF;">订单批量操作</text>
			</view>
			<view class="notCheck" v-else>
				<text @click="showCheck=!showCheck" style="flex: 1;">取消批量操作</text>
				<view class="woodsbtn" @click="cancelOrderAll">
					批量取消
				</view>
				<view class="woodsbtn" @click="handleEdit">
					批量修改
				</view>
			</view>
		</view>
		<reason-list title="取消原因" dict="cancel_order" ref="reason" @handleChange="reasonCallback"></reason-list>
		<early-termination ref="termination" @handleChange="handleEarly"></early-termination>
		<editAddress ref="editAddress" @callBack="editAdressed"/>
	</view>
</template>

<script>
	import {cancelOrderAPI,orderListAPI,cancelOrderWaitingAPI,earlyTerminationOrderAPI,
	deleteOrderAPI,aftersalecancelAPI} from "@/api/order.js"
	import {getinvoiceAPI, userInfoAPI} from "@/api/user.js"
	import {valuebykeyAPI} from "@/api/api.js"
	import reasonList from "./components/reasonList.vue"
	import earlyTermination from "./components/earlyTermination.vue"
	import pageing from "@/mixins/pageing.js"
	import  checkIcon from "@/components/checkIcon.vue"	
	import editAddress from "./components/editAddress.vue"
	export default {
		mixins:[pageing],
		components:{
			reasonList,earlyTermination,checkIcon,
			editAddress
		},
		data() {
			return {
				imageStatus:[
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/67c758999edbd6b893d515f7024f0f539e98cf61def99c29a16b0b40eb79a143.png",//周期保洁
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/6e4b3b46f02412865fb2169fde42707dd11c97b8b6e89bf55bc0a931152c49e1.png",//单次保洁
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/d45513f53d44ef2e6543ba0631002fd525b1efc14f344351aabf37e7dc17d1fa.png",//工程订单
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/670b23b5915437167bca3b84b5cf6edc369fbb0f3239b3ae6673c48b99d44324.png",//陪护订单
					
				],
				list:[],
				integral:'',
				toplist:[
					 
					{id:'0',name:"待付款", point: 0},
					{id:"1",name:"已发布", point: 0},
					{id:"2",name:"待服务", point: 0},
					{id:"3,4,5",name:"售后", point: 0},
					{id:'',name:"全部", point: 0}
				],
				topSign:'',//订单状态 0待付款 1 已发布 2待服务3售后 4 售后中 5售后完成 6已完成 7已取消
				cancelType:"1" ,// 1.待付款-取消订单 2.已发布-取消订单
				ids:[],
				checkList:[],
				choseItem:{},
				showCheck:false,
				showType1:false

			}
		}, 
		onShow() {
			this.list = []
			this.getlist()
			userInfoAPI().then(res => {
				let pointlist=[res.orderDfk,res.orderYfb,res.orderDfw,res.orderSh,res.orderAll]
				this.toplist = this.toplist.map((item,index)=>{
					item.point=pointlist[index]
					return item
				})
			})
		},
		onLoad(option) {
			this.topSign=option.topSign?option.topSign:''
		},
		filters:{
			statusStr(val){
				if(val>=0 && val<=12){
					//   0 已出发 1 已到达 2已结束 4 待服务 5 拒单 6 转单申请 7 取消申请 11 修改申请 12已开始
 					let obj={
						"0":"已出发",
						"1":"已到达",
						"2":"已结束",
						"4":"待服务",
						"5":"拒单",
						"6":"转单申请",
						"7":"取消申请",
						"11":"修改申请",
						"12":"已开始",
					}
					
					return obj[val+'']
				}else{
					val
				}
				
			}
		},
		methods: {
			handleShare(item) {
			      // 动态设置分享标题和路径
			      const title = `分享 ${item.categoryName} 的订单`;
			      const path = `/pages/order/orderinfo?id=${item.id}`;
			
			      // 使用 uni-app API 设置分享配置
			      uni.updateShareMenu({
			        withShareTicket: true,
			        menus: ['shareAppMessage', 'shareTimeline'],
			        success: () => {
			          console.log('分享菜单更新成功');
			        },
			        fail: (err) => {
			          console.error('分享菜单更新失败', err);
			        }
			      });
			
			      // 监听分享事件
			      uni.onShareAppMessage((res) => {
			        if (res.from === 'button') {
			          // 来自页面内分享按钮
			          return {
			            title,
			            path,
			            success: (res) => {
			              console.log('分享成功', res);
			            },
			            fail: (err) => {
			              console.error('分享失败', err);
			            }
			          };
			        }
			      });
			    },
			editAdressed(){
				this.ids=[]
				this.showCheck=false
			},
			toInvoice(info){
				// 1 未申请 2 开票中  3 开票完成
				if(info.invoiceStatus==1){
					this.tourl('/pages/my/invoice/addinvoice?view='+info.invoiceStatus+'&id='+info.id)
				}else if(info.invoiceStatus==2){
					getinvoiceAPI({orderId:info.id}).then(res=>{
						let email=res.email
						uni.showModal({
							title:"开票中",
							content:`发票开具中，开票完成后会发送到您的预留 邮箱${email}中，请注意查收`,
							showCancel:false,
							confirmText:"我已了解"
						})	 
					})
				}else if(info.invoiceStatus==3){
					getinvoiceAPI({orderId:info.id}).then(res=>{
						let email=res.email
						uni.showModal({
							title:"开票成功",
							content:`开票成功${email}中，下载查看`,
							showCancel:false,
							confirmText:"我已了解"
						})	 
					})
				}
				
			},
			
			ischangeOrder(xorderItems){
				if(xorderItems && xorderItems.length>0){
					return xorderItems.find(item=>item.staffStatus=="6")
				}
				return false
			},
			aftersalecancel(item){
				aftersalecancelAPI({id:item.id}).then(res=>{
					uni.showToast({
						 title: "已取消售后",
						 duration: 2000				
					});	
					this.resetQuery()
				})
			},
			handleEdit(){
				if(this.ids.length<5){
					return uni.showToast({
						 title: "请至少选择5个订单",icon:'none',duration: 2000				
					});	
				}
				const firstMerchantOrderId = this.checkList[0].merchantOrderId;
     			let flag= this.checkList.every(order => order.merchantOrderId === firstMerchantOrderId);
				if(!flag){
					return uni.showToast({
						 title: "请选择相同周期订单",icon:'none',duration: 2000				
					});	
				}
				// this.tourl('/pages/order/editOrder?id='+this.ids.join(","))
				
				this.$refs.editAddress.getinit(this.ids)
				
			},
			cancelOrderAll(){
				if(this.ids.length<5){
					return uni.showToast({
						 title: "请至少选择5个订单",
						 duration: 2000				
					});	
				}
				const firstMerchantOrderId = this.checkList[0].merchantOrderId;
     			let flag= this.checkList.every(order => order.merchantOrderId === firstMerchantOrderId);
				if(!flag){
					return uni.showToast({
						 title: "请选择相同周期订单",
						 duration: 2000				
					});	
				}
				if(this.topSign==0){
					this.cancelType=1
				}else if(this.topSign==1){
					this.cancelType=2
				}else{
					cancelOrderWaitingAPI({ids:this.ids}).then(res=>{
						this.$refs.reason.money=res
					})
				}
				this.$refs.reason.visible=true
			},
			choseCheck(id,item){
				const index = this.ids.indexOf(id);
				if (index === -1) {
					this.checkList.push(item);
					this.ids.push(id);
				} else {
					this.checkList.splice(index, 1);
					this.ids.splice(index, 1);
				}
				console.log(this.ids,id)
			},
			deleteOrder(item){
				deleteOrderAPI({id:item.id}).then(res=>{
					uni.showToast({
						 title: "已删除订单",
						 duration: 2000				
					});	
					this.resetQuery()
				})
			},
			eralychose(item){
				this.choseItem=item
				this.$refs.termination.visible=true
			},
			handleEarly(endRemarks){
				earlyTerminationOrderAPI({
					id:this.choseItem.id,
					endRemarks
				}).then(res=>{
					uni.showToast({
						 title: "已确认订单",
						 duration: 1800				
					});	
					this.resetQuery()
				})
			} ,
		 
			topChange(n){
				this.showCheck=false
				this.ids=[]
				this.topSign=n
				this.list=[]
				this.pageNo=1
				this.getlist()
			},
			getlist(){
				var data={
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}
				if(this.topSign!=-1){
					data.orderStatus=this.topSign
				}
				orderListAPI(data).then(res=>{
					this.total=res.total
					this.list= this.list.concat(res.list)

					this.showType1=this.list.some(item => item.type == 1);
					console.log(this.showType1)
				})
			},
			cancelOrder(item,cancelType){
				
				this.ids=[item.id]
				this.cancelType=cancelType
				if(cancelType==3){
					// 先获取一下不能退的金额
					cancelOrderWaitingAPI({id:item.id}).then(res=>{
						this.$refs.reason.money=res
					})
				} 
				this.$refs.reason.visible=true
				
			},
			resetQuery(){
				this.list=[]
				this.pageNo=1
				this.getlist()
			},
			reasonCallback(cancel,money){
				if(cancel.length){
					cancelOrderAPI({
						ids:this.ids,
						reason:cancel.join(","),
						money:this.cancelType==3?money:undefined
					},this.cancelType).then(res=>{
						uni.showToast({
							 title: "取消订单",
							 duration: 1800				
						});	
						this.resetQuery()
					})
				}else{
					uni.showToast({
						 title: "请选择理由", 
						 icon:'none'					
					});	
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
.pages{
	background-color: #F9F9F9;
	min-height: 100vh;
	padding:100rpx 0 0 ;
}
.tabbox {
	position: fixed;
	top: 0px;
	left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 30rpx;
	background-color: #fff;
	z-index: 99;
	// height: 100rpx;
	border-bottom: 1px solid #eef0f4;
	width: 100%;

	.tab {
		padding: 20rpx;
		position: relative;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #666;
		text-align: center;

	}

	.active {
		font-weight: bold;
		color: #333;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 30%;
		width: 40%;
		height: 6rpx;
		background: $uni-color-primary;
		border-radius: 1px;
	}
  .message-badge{
    position: absolute;
    top: 10rpx;
    right: 0rpx;
    background-color: red;
    color: white;
    border-radius: 50%;
    min-width: 30rpx;
    height: 30rpx; 
    font-size: 14rpx;
    line-height: 30rpx;
    text-align: center;
  }
}


.box{
	padding: 20rpx;
}	
.listbox{
	display: flex;
	align-items: center;
	.check{
		width: 40rpx;
	}
}
.list{
	background-color: #fff; 
	padding: 20rpx;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	flex: 1;
	.list1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #999999;
	}
	.list2{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		
		margin: 15rpx 0;
		 
		border-radius: 15rpx;
		.img{
			
			width: 160rpx;
			height: 128rpx;
			margin-right: 20rpx;
			image{
				 width: 160rpx;
				 height: 128rpx;
			}
		}
		.txt{
			flex: 1;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					line-height: 50rpx;
					color: #999;
					font-size: 24rpx;
				}
				.txt1{
					font-size: 28rpx;
					color: #333;
				}
			}
			
		}
	}
	.list3{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0;
		font-size: 26rpx;
	}
	.list4{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
		flex-wrap: wrap;
		view{
			padding: 10rpx 24rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			margin-top: 10rpx; 
			border-radius: 56rpx;
			border: 1px solid #AAAAAA;
			margin-left: 15rpx;
			font-size: 24rpx;
			color: #333333;
		}
		.xq{
			background-color:#ff3a3e;
			border: 1px solid #ff3a3e;
			color: #fff;
		}
	}
}

.orderfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20rpx 30rpx;
    background-color: #fff;
	height: 100rpx;
	.notCheck{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text{
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}
    .woodsbtn{
		width: 200rpx;
		padding:15rpx 30rpx;
		font-size: 30rpx;
		margin: 0 10rpx;
		font-weight: 400;
	} 
}

</style>
